<div id="comments" class="comments">
    <div class="comment-create" v-if="isLogin">
        <div class="comment-input-wrapper">
            <div class="comment-quote-info" v-if="quote">
                回复：<label v-text="quote.user.nickname"></label>
                <i class="iconfont icon-close" @click="cancelReply"></i>
            </div>
            <textarea ref="commentEditor" class="comment-input" placeholder="发表你的观点..." v-model="content"
                      @keydown.ctrl.enter="ctrlEnterCreate"
                      @keydown.meta.enter="ctrlEnterCreate"
                      @input="autoHeight"></textarea>
        </div>
        <div class="comment-button-wrapper">
            <div class="comment-help" title="Markdown is supported">
                <a href="https://www.mlog.club/article/5522" target="_blank">
                    <svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                        <path fill-rule="evenodd"
                              d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
                    </svg>
                </a>
            </div>
            <button class="button is-light" @click="create" v-text="btnName"></button>
        </div>
    </div>
    <div class="comment-not-login" v-else>
        <div class="comment-login-div">请<a href="{{baseUrl}}/user/github/login">登录</a>后发表观点
        </div>
    </div>
    <div v-if="!loading" v-for="comment in itemList">
        <div class="comment">
            <div class="comment-avatar">
                <div class="avatar has-border is-rounded"
                     :style="{backgroundImage:'url(' + comment.user.avatar + ')'}"></div>
            </div>
            <div class="comment-meta">
                <div>
                    <span class="comment-nickname" v-text="comment.user.nickname"></span>
                    <span class="comment-reply"><a @click="reply(comment)">回复</a></span>
                </div>
                <div>
                    <small class="comment-time" v-text="formatDate(comment.createTime)"></small>
                </div>
            </div>

            <div class="comment-content">
                <p v-html="comment.content"></p>
                <blockquote class="comment-quote" v-if="comment.quoteContent"
                            v-html="comment.quoteContent"></blockquote>
            </div>
        </div>
    </div>
    <div class="comment-show-more" v-if="hasMore">
        <a class="button is-text" @click="list()">查看更多...</a>
    </div>
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#comments',
    data: {
      entityType: '{{.CommentEntityType}}',
      entityId: '{{.CommentEntityId}}',
      cursor: 0,
      loading: false,
      itemList: [],
      content: '',
      hasMore: true,
      isLogin: {{if .CurrentUser}}true{{else}}false{{end}},

      sending: false,

      // 引用的对象
      quote: null,
    },
    mounted() {
      this.list()
    },
    methods: {
      list() {
        var me = this
        httpGet('{{baseUrl}}/comment/list', {
          entityType: me.entityType,
          entityId: me.entityId,
          cursor: me.cursor
        }).then(function (data) {
          me.itemList = me.itemList || []
          me.cursor = data.cursor

          if (data.itemList && data.itemList.length > 0) {
            for (var i = 0; i < data.itemList.length; i++) {
              me.itemList.push(data.itemList[i])
            }
          } else {
            me.hasMore = false
          }
        }, function (response) {
          console.error(response)
        })
      },
      ctrlEnterCreate(event) {
        event.stopPropagation()
        event.preventDefault()
        this.create()
      },
      create() {
        var me = this
        if (!me.content) {
          alert('请输入内容')
          return
        }
        if (me.sending) {
          console.log('正在发送中，请不要重复提交...')
          return
        }
        me.sending = true;
        httpPost('{{baseUrl}}/comment/create', {
          entityType: me.entityType,
          entityId: me.entityId,
          content: me.content,
          quoteId: me.quote ? me.quote.commentId : '',
        }).then(function (data) {
          me.itemList.unshift(data)
          me.content = ''
          me.quote = null
          me.sending = false
        }, function (response) {
          console.error(response)
          me.sending = false
        })
      },
      reply(quote) {
        if (!this.isLogin) {
          toSignin()
        }
        this.quote = quote
      },
      cancelReply() {
        this.quote = null
      },
      autoHeight() {
        var elem = this.$refs.commentEditor
        elem.style.height = 'auto'
        elem.scrollTop = 0 // 防抖动
        elem.style.height = elem.scrollHeight + 'px'
      }
    },
    computed: {
      btnName: function () {
        return this.sending ? '正在发表...' : '发表 (ctrl+enter)'
      }
    }
  })
</script>
